<template>
  <div class="main">
    <div class="leftGroup">
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(1)"
        >第一组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(2)"
        >第二组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(3)"
        >第三组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(4)"
        >第四组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(5)"
        >第五组</Button
      >
    </div>
    <div class="center">
      <div class="center-top">
        <h2>{{ title }}</h2>
        <Button type="primary" @click="changetTitle">编辑</Button>
      </div>
      <div class="group-member" :class="{ 'group-member-show': showContent }">
        <div class="group-member-center">
          <div
            v-for="(item, index) in dataList"
            class="member"
            :class="{
              'member-sub': item.sub,
              'member-disabled': item.isFinish,
            }"
            :key="index"
            @click="subMember(index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="group-member-bottom">
          <!-- <Button type="info">关闭</Button> -->
          <Button size="large" type="error" @click="inputSituation(0)">未掌握</Button>
          <Button size="large" type="warning" @click="inputSituation(1)">基本掌握</Button>
          <Button size="large" type="success" @click="inputSituation(2)"
            >掌握</Button
          >
        </div>
      </div>
    </div>
    <div class="rightGroup">
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(6)"
        >第六组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(7)"
        >第七组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(8)"
        >第八组</Button
      >
      <Button
        class="groups"
        size="large"
        type="primary"
        @click="showGroupMember(9)"
        >第九组</Button
      >
    </div>
    <div class="hiddenInput">
      <input type="text" :value="topicId" hidden />
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassManager",
  data() {
    return {
      dataList: [],
      title: "三角形",
      popTitle: "",
      topicId: "",
      subStudent: "",
      currentGroup: 1,
      grouplist: [
        {
          groupId: 1,
          groupName: "",
          groupMember: [
            {
              id: 1,
              name: "聂彤彤",
              sub: false,
            },
            {
              id: 1,
              name: "孙毅博",
              sub: false,
            },
            {
              id: 1,
              name: "单蒙",
              sub: false,
            },
            {
              id: 1,
              name: "刘元亨",
              sub: false,
            },
            {
              id: 1,
              name: "李佳妮",
              sub: false,
            },
            {
              id: 1,
              name: "郑俊浩",
              sub: false,
            },
          ],
        },
        {
          groupId: 2,
          groupName: "",
          groupMember: [
            {
              id: 1,
              name: "王悦",
              sub: false,
            },
            {
              id: 1,
              name: "杨凤斌",
              sub: false,
            },
            {
              id: 1,
              name: "李至美",
              sub: false,
            },
            {
              id: 1,
              name: "张嘉琪",
              sub: false,
            },
            {
              id: 1,
              name: "上官婧",
              sub: false,
            },
            {
              id: 1,
              name: "刘备",
              sub: false,
            },
          ],
        },
      ],
      showContent: true,
    };
  },
  created: function () {
    console.log("当前topicid是", sessionStorage.getItem("topicId"));
    this.topicId = sessionStorage.getItem("topicId");
    this.getGroupMember(this.currentGroup);
  },
  methods: {
    subMember(idx) {
      console.log(idx);
      console.log(this.dataList);
      let studentId = this.dataList[idx].id;
      if (this.dataList[idx].isFinish) {
        return;
      }
      if (!this.dataList[idx].sub) {
        this.subStudent += studentId + ",";
      } else {
        let currentId = studentId + ",";
        this.subStudent = this.subStudent.replace(currentId, "");
      }
      this.dataList[idx].sub = !this.dataList[idx].sub;
      console.log(this.subStudent);
    },
    //显示组员
    showGroupMember(idx) {
      // this.dataList = this.grouplist[idx].groupMember;
      this.showContent = true;
      this.currentGroup = idx;
      this.getGroupMember(idx);
    },
    //获取组员数据
    getGroupMember(groupId) {
      let that = this;

      let postData = {
        groupId: groupId,
        topicId: this.topicId,
      };
      this.axios
        .post("http://127.0.0.2:3000", {
          params: postData,
        })
        .then(function (response) {
          console.log(response);
          console.log(2333);
          // for (let i = 0; i < response.data.data.length; i++) {
          //   response.data.data[i].sub = false;
          //   response.data.data[i].isFinish = false;
          // }
          that.dataList = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    },

    //修改标题
    changetTitle() {
      let that = this;
      this.$Modal.confirm({
        render: (h) => {
          return h("Input", {
            props: {
              value: this.title,
              autofocus: true,
              placeholder: "Please enter your name...",
            },
            on: {
              input: (val) => {
                this.popTitle = val;
              },
            },
          });
        },
        onOk: function () {
          that.title = that.popTitle;
          console.log(233333);
          console.log(that.title);
          let postData = {
            topic: that.title,
          };
          console.log("请求参数是", postData);
          this.axios
            .post("http://127.0.0.2:3000/topic/add", postData)
            .then(function (response) {
              console.log(response);
              console.log(2333);
              console.log("插入id是", response.data.data);
              that.topicId = response.data.data.insertId;
              sessionStorage.setItem("topicId", response.data.data.insertId);
            })
            .catch(function (error) {
              console.log(error);
            })
            .then(function () {
              // always executed
            });
        },
      });
    },
    /**
     * idx 0未掌握  1基本掌握 2掌握
     */
    inputSituation(idx) {
      let studentId = this.subStudent.substring(0, this.subStudent.length - 1);
      console.log("当前标题是", this.topicId);
      if (!this.topicId) {
        this.$Message.error("标题不能为空！");
      }
      let postData = {
        topicId: this.topicId,
        type: idx,
        studentId: studentId,
      };
      let that = this;
      this.axios
        .post("http://127.0.0.2:3000/record/update", postData)
        .then(function (response) {
          console.log(response);
          console.log(2333);
          that.subStudent = "";
          that.getGroupMember(that.currentGroup);
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    },
  },
};
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.leftGroup {
  display: flex;
  flex-direction: column;
}

.rightGroup {
  display: flex;
  flex-direction: column;
}

.groups {
  margin-top: 50px;
}

/* 中间成员 */
.center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.group-member {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: coral;
  padding: 150px 30px;
  border-radius: 10px;
  transition: 0.4s;
  opacity: 0;
  position: relative;
}
.group-member-center {
  width: 60%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.group-member-show {
  opacity: 1;
}

.member {
  width: 100px;
  height: 40px;
  line-height: 40px;
  /* border: 1px solid #2d8cf0; */
  border-radius: 5px;
  color: #2d8cf0;
  margin-top: 20px;
  background: #fff;
  cursor: pointer;
}

.member-sub {
  background: #2d8cf0;
  color: #fff;
}

.member-disabled {
  background: #f7f7f7;
  color: #c5c8ce;
  border-color: #dcdee2;
}

/* 成员底部三个掌握情况按钮 */
.group-member-bottom {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  padding: 10px 0px;
}
</style>